<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OmniStore | All-in-One Premium Marketplace</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

        :root {
            --primary: #0f172a;
            --accent: #2563eb;
            --accent-soft: #eff6ff;
            --gold: #d4af37;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--primary);
            overflow-x: hidden;
        }

        /* Improved Image Visibility: Gradient is now lighter to let image details show */
        .hero-gradient {
            background: linear-gradient(to right, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.1) 60%, rgba(15, 23, 42, 0) 100%);
        }

        /* Slideshow */
        .slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
            z-index: 0;
        }
        .slide.active { opacity: 1; z-index: 10; }
        
        /* Added a slight brightness boost to slide images */
        .slide img {
            filter: brightness(1.05) contrast(1.02);
        }

        .slide-content {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease-out 0.3s;
            /* Text shadow ensures readability on lighter image areas */
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }
        .active .slide-content { opacity: 1; transform: translateY(0); }
        .slider-dot.active { background-color: var(--accent); width: 2rem; }

        /* Category Cards */
        .cat-card:hover .cat-img { transform: scale(1.1); }
        .cat-img { transition: transform 0.5s ease; }

        /* Product Card Hover */
        .product-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
        .product-card:hover { transform: translateY(-5px); }

        .tag-fashion { background: #fee2e2; color: #dc2626; }
        .tag-tech { background: #e0e7ff; color: #4338ca; }
        .tag-grocery { background: #dcfce7; color: #166534; }
        .tag-parts { background: #fef3c7; color: #92400e; }

        .nav-link { position: relative; }
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent);
            transition: width 0.3s ease;
        }
        .nav-link:hover::after { width: 100%; }
    </style>
</head>
<body class="bg-slate-50">

    <!-- Top Bar -->
    <div class="bg-slate-900 text-white text-[11px] py-2 px-6 flex justify-between items-center uppercase tracking-widest font-bold">
        <div class="flex items-center gap-4">
            <span>Free Shipping Over $100</span>
            <span class="hidden md:inline border-l border-slate-700 pl-4">Daily Deals: 40% Off Select Parts</span>
        </div>
        <div class="flex gap-4">
            <a href="#" class="hover:text-blue-400">Track Order</a>
            <a href="#" class="hover:text-blue-400">Support</a>
        </div>
    </div>

    <!-- Navigation -->
    <nav id="navbar" class="sticky top-0 w-full z-50 bg-white shadow-sm transition-all duration-300 px-6 py-3 flex items-center justify-between">
        <div class="flex items-center gap-8">
            <div class="text-2xl font-extrabold tracking-tighter text-slate-900">OMNI<span class="text-blue-600">STORE.</span></div>
            
            <div class="hidden lg:flex items-center space-x-6 text-sm font-semibold text-slate-600">
                <a href="#" class="nav-link text-blue-600">Home</a>
                <div class="group relative cursor-pointer py-2">
                    <span class="flex items-center gap-1">Categories <i data-lucide="chevron-down" class="w-4 h-4"></i></span>
                    <div class="absolute top-full left-0 w-64 bg-white shadow-xl rounded-xl p-4 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all border border-slate-100 translate-y-2 group-hover:translate-y-0">
                        <a href="#" class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg transition"><i data-lucide="shirt" class="w-4 h-4 text-red-500"></i> Fashion & Apparel</a>
                        <a href="#" class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg transition"><i data-lucide="smartphone" class="w-4 h-4 text-blue-500"></i> Tech & Electronics</a>
                        <a href="#" class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg transition"><i data-lucide="shopping-basket" class="w-4 h-4 text-green-500"></i> Fresh Groceries</a>
                        <a href="#" class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg transition"><i data-lucide="settings" class="w-4 h-4 text-orange-500"></i> Auto & Industrial Parts</a>
                        <a href="#" class="flex items-center gap-3 p-2 hover:bg-slate-50 rounded-lg transition"><i data-lucide="sparkles" class="w-4 h-4 text-purple-500"></i> Cosmetics & Beauty</a>
                    </div>
                </div>
                <a href="#" class="nav-link">Best Sellers</a>
                <a href="#" class="nav-link">Bulk Orders</a>
            </div>
        </div>

        <div class="flex-1 max-w-md mx-8 hidden md:block">
            <div class="relative group">
                <input type="text" placeholder="Search for products, parts or groceries..." class="w-full bg-slate-100 border-none rounded-full py-2.5 px-10 text-sm focus:ring-2 focus:ring-blue-500 focus:bg-white transition-all">
                <i data-lucide="search" class="absolute left-3.5 top-3 w-4 h-4 text-slate-400"></i>
            </div>
        </div>

        <div class="flex items-center space-x-5 text-slate-700">
            <i data-lucide="heart" class="w-5 h-5 cursor-pointer hover:text-blue-600 transition"></i>
            <div class="relative cursor-pointer group">
                <i data-lucide="shopping-cart" class="w-5 h-5 group-hover:text-blue-600"></i>
                <span class="absolute -top-2 -right-2 bg-blue-600 text-white text-[10px] w-4.5 h-4.5 p-0.5 rounded-full flex items-center justify-center font-bold border-2 border-white">0</span>
            </div>
            <div class="w-8 h-8 rounded-full bg-slate-200 flex items-center justify-center cursor-pointer hover:bg-slate-300 transition">
                <i data-lucide="user" class="w-4 h-4"></i>
            </div>
            <i data-lucide="menu" class="lg:hidden w-6 h-6 cursor-pointer"></i>
        </div>
    </nav>

    <!-- Versatile Slideshow -->
    <section class="relative h-[650px] overflow-hidden bg-slate-900">
        <!-- Slide 1: Fashion -->
        <div class="slide active" data-slide="0">
            <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&q=80&w=2000" class="w-full h-full object-cover" alt="Fashion">
            <div class="absolute inset-0 hero-gradient"></div>
            <div class="container mx-auto px-6 h-full flex items-center relative z-20">
                <div class="max-w-2xl slide-content text-white">
                    <span class="bg-red-600 text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-6 inline-block">Apparel Collection</span>
                    <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">Elevate Your <br>Everyday Style.</h1>
                    <p class="text-lg text-slate-100 mb-8 max-w-lg">Premium fabrics meets urban design. Explore the Spring 2024 drop.</p>
                    <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold transition-all shadow-lg shadow-blue-900/40 inline-block uppercase text-xs tracking-widest">Shop Fashion</a>
                </div>
            </div>
        </div>

        <!-- Slide 2: Parts/Industrial -->
        <div class="slide" data-slide="1">
            <img src="https://images.unsplash.com/photo-1530046339160-ce3e5b097ea2?auto=format&fit=crop&q=80&w=2000" class="w-full h-full object-cover" alt="Spare Parts">
            <div class="absolute inset-0 hero-gradient"></div>
            <div class="container mx-auto px-6 h-full flex items-center relative z-20">
                <div class="max-w-2xl slide-content text-white">
                    <span class="bg-orange-600 text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-6 inline-block">Heavy Duty & Automotive</span>
                    <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">Precision Parts <br>For High Performance.</h1>
                    <p class="text-lg text-slate-100 mb-8 max-w-lg">OEM standard engine parts, suspension, and electrical components for all major brands.</p>
                    <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold transition-all shadow-lg shadow-blue-900/40 inline-block uppercase text-xs tracking-widest">Browse Parts Catalog</a>
                </div>
            </div>
        </div>

        <!-- Slide 3: Groceries -->
        <div class="slide" data-slide="2">
            <img src="https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&q=80&w=2000" class="w-full h-full object-cover" alt="Groceries">
            <div class="absolute inset-0 hero-gradient"></div>
            <div class="container mx-auto px-6 h-full flex items-center relative z-20">
                <div class="max-w-2xl slide-content text-white">
                    <span class="bg-green-600 text-[10px] font-bold uppercase tracking-widest px-3 py-1 rounded-full mb-6 inline-block">Farm To Table</span>
                    <h1 class="text-5xl md:text-7xl font-extrabold mb-6 leading-tight">Freshness <br>Delivered Daily.</h1>
                    <p class="text-lg text-slate-100 mb-8 max-w-lg">Organic produce and pantry essentials delivered to your door in under 2 hours.</p>
                    <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-xl font-bold transition-all shadow-lg shadow-blue-900/40 inline-block uppercase text-xs tracking-widest">Order Groceries</a>
                </div>
            </div>
        </div>

        <div class="absolute bottom-8 left-0 w-full z-30 flex justify-center space-x-2">
            <button class="slider-dot active w-2.5 h-2.5 rounded-full bg-white/40 transition-all" onclick="goToSlide(0)"></button>
            <button class="slider-dot w-2.5 h-2.5 rounded-full bg-white/40 transition-all" onclick="goToSlide(1)"></button>
            <button class="slider-dot w-2.5 h-2.5 rounded-full bg-white/40 transition-all" onclick="goToSlide(2)"></button>
        </div>
    </section>

    <!-- Top Categories Grid -->
    <section class="py-20">
        <div class="container mx-auto px-6">
            <div class="flex items-center justify-between mb-12">
                <h2 class="text-3xl font-bold">Shop by Department</h2>
                <div class="flex gap-2">
                    <button class="p-2 border border-slate-200 rounded-full hover:bg-white hover:shadow-md transition"><i data-lucide="arrow-left" class="w-5 h-5"></i></button>
                    <button class="p-2 border border-slate-200 rounded-full hover:bg-white hover:shadow-md transition"><i data-lucide="arrow-right" class="w-5 h-5"></i></button>
                </div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                <!-- Fashion -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1556906781-9a412961c28c?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Fashion">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Fashion</span>
                </a>
                <!-- Cosmetics -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Cosmetics">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Beauty</span>
                </a>
                <!-- Electronics -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1491933382434-500287f9b54b?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Electronics">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Tech</span>
                </a>
                <!-- Grocery -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1578916171728-46686eac8d58?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Grocery">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Fresh Market</span>
                </a>
                <!-- Spare Parts -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1517524008436-bbdb53c5aed5?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Parts">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Auto Parts</span>
                </a>
                <!-- Bulk -->
                <a href="#" class="cat-card group text-center">
                    <div class="relative aspect-square overflow-hidden rounded-3xl bg-slate-200 mb-4 shadow-sm">
                        <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?auto=format&fit=crop&q=80&w=400" class="cat-img w-full h-full object-cover" alt="Bulk">
                        <div class="absolute inset-0 bg-black/5 group-hover:bg-black/20 transition-all"></div>
                    </div>
                    <span class="font-bold text-sm block">Logistics</span>
                </a>
            </div>
        </div>
    </section>

    <!-- Diverse Catalog Section -->
    <section class="py-20 bg-slate-100">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-12">
                <div>
                    <h2 class="text-4xl font-extrabold mb-2">Trending Now</h2>
                    <p class="text-slate-500">Curated from across our global marketplace</p>
                </div>
                <div class="flex flex-wrap gap-2">
                    <button class="bg-blue-600 text-white px-6 py-2 rounded-full text-sm font-bold shadow-md">All</button>
                    <button class="bg-white text-slate-600 hover:bg-blue-50 px-6 py-2 rounded-full text-sm font-bold border border-slate-200 transition">Fashion</button>
                    <button class="bg-white text-slate-600 hover:bg-blue-50 px-6 py-2 rounded-full text-sm font-bold border border-slate-200 transition">Groceries</button>
                    <button class="bg-white text-slate-600 hover:bg-blue-50 px-6 py-2 rounded-full text-sm font-bold border border-slate-200 transition">Spare Parts</button>
                    <button class="bg-white text-slate-600 hover:bg-blue-50 px-6 py-2 rounded-full text-sm font-bold border border-slate-200 transition">Cosmetics</button>
                </div>
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
                <!-- Product 1: Fashion -->
                <div class="product-card group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl p-4">
                    <div class="relative aspect-[4/5] overflow-hidden rounded-2xl mb-4 bg-slate-50">
                        <img src="https://images.unsplash.com/photo-1591047139829-d91aecb6caea?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Jacket">
                        <span class="absolute top-3 left-3 tag-fashion px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Fashion</span>
                        <button class="absolute bottom-3 right-3 bg-white p-2.5 rounded-full shadow hover:bg-blue-600 hover:text-white transition"><i data-lucide="shopping-bag" class="w-4 h-4"></i></button>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900 group-hover:text-blue-600 transition">Premium Wool Overcoat</h3>
                        <p class="text-slate-500 text-xs mb-3">Autumn Collection</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xl font-bold text-slate-900">$189.00</span>
                            <div class="flex items-center text-xs text-slate-400 font-bold"><i data-lucide="star" class="w-3 h-3 fill-yellow-400 stroke-yellow-400 mr-1"></i> 4.9</div>
                        </div>
                    </div>
                </div>

                <!-- Product 2: Spare Parts -->
                <div class="product-card group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl p-4">
                    <div class="relative aspect-[4/5] overflow-hidden rounded-2xl mb-4 bg-slate-50">
                        <img src="https://images.unsplash.com/photo-1619642751034-765dfdf7c58e?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Turbo">
                        <span class="absolute top-3 left-3 tag-parts px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Spare Parts</span>
                        <button class="absolute bottom-3 right-3 bg-white p-2.5 rounded-full shadow hover:bg-blue-600 hover:text-white transition"><i data-lucide="shopping-bag" class="w-4 h-4"></i></button>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900 group-hover:text-blue-600 transition">High-Perf Turbocharger</h3>
                        <p class="text-slate-500 text-xs mb-3">Model: T-X450 | V6 Support</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xl font-bold text-slate-900">$1,250.00</span>
                            <div class="flex items-center text-xs text-slate-400 font-bold"><i data-lucide="truck" class="w-3 h-3 text-blue-500 mr-1"></i> Next Day</div>
                        </div>
                    </div>
                </div>

                <!-- Product 3: Groceries -->
                <div class="product-card group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl p-4">
                    <div class="relative aspect-[4/5] overflow-hidden rounded-2xl mb-4 bg-slate-50">
                        <img src="https://images.unsplash.com/photo-1598170845058-32b9d6a5da37?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Carrots">
                        <span class="absolute top-3 left-3 tag-grocery px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Fresh Market</span>
                        <button class="absolute bottom-3 right-3 bg-white p-2.5 rounded-full shadow hover:bg-blue-600 hover:text-white transition"><i data-lucide="shopping-bag" class="w-4 h-4"></i></button>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900 group-hover:text-blue-600 transition">Organic Heirloom Carrots</h3>
                        <p class="text-slate-500 text-xs mb-3">1kg | Locally Sourced</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xl font-bold text-slate-900">$4.50</span>
                            <div class="flex items-center text-xs text-green-600 font-bold"><i data-lucide="clock" class="w-3 h-3 mr-1"></i> In Stock</div>
                        </div>
                    </div>
                </div>

                <!-- Product 4: Cosmetics -->
                <div class="product-card group bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl p-4">
                    <div class="relative aspect-[4/5] overflow-hidden rounded-2xl mb-4 bg-slate-50">
                        <img src="https://images.unsplash.com/photo-1596462502278-27bfdc4033c8?auto=format&fit=crop&q=80&w=800" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" alt="Serum">
                        <span class="absolute top-3 left-3 tag-tech bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider">Cosmetics</span>
                        <button class="absolute bottom-3 right-3 bg-white p-2.5 rounded-full shadow hover:bg-blue-600 hover:text-white transition"><i data-lucide="shopping-bag" class="w-4 h-4"></i></button>
                    </div>
                    <div>
                        <h3 class="font-bold text-slate-900 group-hover:text-blue-600 transition">Hydrating Glow Serum</h3>
                        <p class="text-slate-500 text-xs mb-3">50ml | Vitamin C + Hyaluronic</p>
                        <div class="flex items-center justify-between">
                            <span class="text-xl font-bold text-slate-900">$42.00</span>
                            <div class="flex items-center text-xs text-slate-400 font-bold"><i data-lucide="star" class="w-3 h-3 fill-yellow-400 stroke-yellow-400 mr-1"></i> 5.0</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Logistics Banner -->
    <section class="py-12 bg-blue-600 text-white overflow-hidden relative">
        <div class="container mx-auto px-6 flex flex-col md:flex-row items-center justify-between relative z-10">
            <div class="mb-8 md:mb-0">
                <h2 class="text-3xl font-extrabold mb-4">Solutions for Businesses</h2>
                <p class="text-blue-100 text-lg max-w-xl">From large-scale machinery parts to weekly office pantry refills. Open a corporate account for tax benefits and tiered pricing.</p>
            </div>
            <div class="flex gap-4">
                <button class="bg-white text-blue-600 px-8 py-3 rounded-xl font-bold hover:bg-blue-50 transition">Register Entity</button>
                <button class="bg-blue-500 text-white border border-blue-400 px-8 py-3 rounded-xl font-bold hover:bg-blue-400 transition">Contact Sales</button>
            </div>
        </div>
        <div class="absolute right-0 top-0 h-full w-1/3 opacity-10 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')]"></div>
    </section>

    <!-- Footer -->
    <footer class="bg-white pt-24 pb-12 border-t border-slate-200">
        <div class="container mx-auto px-6">
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-12 mb-20">
                <div class="lg:col-span-2">
                    <div class="text-2xl font-extrabold tracking-tighter text-slate-900 mb-6">OMNI<span class="text-blue-600">STORE.</span></div>
                    <p class="text-slate-500 text-sm leading-relaxed mb-8 max-w-sm">The world's most versatile marketplace. Providing quality fashion, industrial components, and everyday essentials under one digital roof.</p>
                    <div class="flex gap-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"><i data-lucide="instagram" class="w-4 h-4"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"><i data-lucide="twitter" class="w-4 h-4"></i></a>
                        <a href="#" class="w-10 h-10 rounded-full bg-slate-100 flex items-center justify-center hover:bg-blue-600 hover:text-white transition"><i data-lucide="linkedin" class="w-4 h-4"></i></a>
                    </div>
                </div>
                <div>
                    <h5 class="font-bold text-xs uppercase tracking-widest mb-8">Departments</h5>
                    <ul class="space-y-4 text-sm text-slate-500">
                        <li><a href="#" class="hover:text-blue-600">Fashion Apparel</a></li>
                        <li><a href="#" class="hover:text-blue-600">Industrial & Auto</a></li>
                        <li><a href="#" class="hover:text-blue-600">Groceries & Food</a></li>
                        <li><a href="#" class="hover:text-blue-600">Electronics</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="font-bold text-xs uppercase tracking-widest mb-8">Account</h5>
                    <ul class="space-y-4 text-sm text-slate-500">
                        <li><a href="#" class="hover:text-blue-600">Manage Account</a></li>
                        <li><a href="#" class="hover:text-blue-600">Track Order</a></li>
                        <li><a href="#" class="hover:text-blue-600">Corporate Login</a></li>
                    </ul>
                </div>
                <div>
                    <h5 class="font-bold text-xs uppercase tracking-widest mb-8">Help Center</h5>
                    <ul class="space-y-4 text-sm text-slate-500">
                        <li><a href="#" class="hover:text-blue-600">Shipping Info</a></li>
                        <li><a href="#" class="hover:text-blue-600">Returns Policy</a></li>
                        <li><a href="#" class="hover:text-blue-600">Contact Support</a></li>
                    </ul>
                </div>
            </div>
            <div class="pt-8 border-t border-slate-100 flex flex-col md:row justify-between items-center text-[10px] text-slate-400 uppercase tracking-[0.2em]">
                <p>© 2024 OmniStore Global Inc. All Rights Reserved.</p>
                <div class="mt-4 md:mt-0 flex space-x-6">
                    <a href="#">Privacy</a>
                    <a href="#">Terms</a>
                    <a href="#">Compliance</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        lucide.createIcons();

        // Slideshow
        let currentSlide = 0;
        const slides = document.querySelectorAll('.slide');
        const dots = document.querySelectorAll('.slider-dot');
        let slideInterval;

        function showSlide(index) {
            slides.forEach(s => s.classList.remove('active'));
            dots.forEach(d => d.classList.remove('active'));
            currentSlide = (index + slides.length) % slides.length;
            slides[currentSlide].classList.add('active');
            dots[currentSlide].classList.add('active');
        }

        function nextSlide() { showSlide(currentSlide + 1); }
        function goToSlide(index) { showSlide(index); clearInterval(slideInterval); slideInterval = setInterval(nextSlide, 7000); }

        slideInterval = setInterval(nextSlide, 7000);

        // Sticky Nav Change
        window.addEventListener('scroll', () => {
            const nav = document.getElementById('navbar');
            if (window.scrollY > 10) {
                nav.classList.add('py-2', 'shadow-md');
                nav.classList.remove('py-3', 'shadow-sm');
            } else {
                nav.classList.add('py-3', 'shadow-sm');
                nav.classList.remove('py-2', 'shadow-md');
            }
        });
    </script>
</body>
</html>